<template>
  <div class="dashboard">
    <!-- 主标题和时间显示 -->
    <div class="dashboard-header">
      <div class="header-left">
        <h1><i class="fas fa-database"></i> 存储管理系统</h1>
        <p>冷热数据分布监控与分析</p>
      </div>
      <div class="time-display">
        {{ currentTime }}
      </div>
    </div>

    <!-- 主要内容区 - 图表布局 -->
    <div class="dashboard-content">
      <!-- 左侧图表区 -->
      <div class="content-left">
        <!-- 热力图 -->
        <div class="chart-container">
          <div class="chart-panel">
            <div class="panel-header">
              <div class="panel-title">冷热数据分布热力图</div>
              <div class="panel-actions">
                <button @click="changeHeatmapView('all')">全部数据</button>
                <button @click="changeHeatmapView('hot')">仅热数据</button>
                <button @click="changeHeatmapView('cold')">仅冷数据</button>
              </div>
            </div>
            <div id="heatmapChart" class="chart"></div>
            <div class="heatmap-legend">
              <div class="legend-item">
                <div class="legend-color cold-color"></div>
                <span>冷数据 (低频访问)</span>
              </div>
              <div class="legend-item">
                <div class="legend-color warm-color"></div>
                <span>温数据 (中等访问)</span>
              </div>
              <div class="legend-item">
                <div class="legend-color hot-color"></div>
                <span>热数据 (高频访问)</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 统计卡片区 - 移动到热力图下方 -->
        <div class="stat-cards-container">
          <div class="stat-card blue">
            <div class="card-header">
              <div class="card-icon">
                <i class="fas fa-hdd fa-lg"></i>
              </div>
              <div>
                <div class="card-title">总存储容量</div>
                <div class="card-subtitle">已使用 / 总容量</div>
              </div>
            </div>
            <div class="stat-value">1.24 <span>PB</span></div>
            <div class="stat-trend">
              <i class="fas fa-arrow-up trend-up"></i>
              <span>总容量 2.5 PB</span>
            </div>
          </div>

          <div class="stat-card red">
            <div class="card-header">
              <div class="card-icon">
                <i class="fas fa-fire fa-lg"></i>
              </div>
              <div>
                <div class="card-title">热数据占比</div>
                <div class="card-subtitle">高频访问数据</div>
              </div>
            </div>
            <div class="stat-value">24.8%</div>
            <div class="stat-trend">
              <i class="fas fa-arrow-up trend-up"></i>
              <span class="trend-up">较上月增长 3.2%</span>
            </div>
          </div>

          <div class="stat-card green">
            <div class="card-header">
              <div class="card-icon">
                <i class="fas fa-snowflake fa-lg"></i>
              </div>
              <div>
                <div class="card-title">冷数据占比</div>
                <div class="card-subtitle">低频访问数据</div>
              </div>
            </div>
            <div class="stat-value">62.4%</div>
            <div class="stat-trend">
              <i class="fas fa-arrow-down trend-down"></i>
              <span class="trend-down">较上月减少 5.1%</span>
            </div>
          </div>

          <div class="stat-card purple">
            <div class="card-header">
              <div class="card-icon">
                <i class="fas fa-bolt fa-lg"></i>
              </div>
              <div>
                <div class="card-title">访问频率峰值</div>
                <div class="card-subtitle">今日最高访问频率</div>
              </div>
            </div>
            <div class="stat-value">1,248 <span>/s</span></div>
            <div class="stat-trend">
              <i class="fas fa-clock"></i>
              <span>发生于 14:23:45</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'DataAggregationStorage',
  setup() {
    const currentTime = ref('');
    let timer = null;
    let heatmapChart = null;
    const filteredData = ref([]);

    // 模拟数据
    const storageData = [
      {
        id: 'DS-1001',
        name: '用户行为日志',
        location: '节点A-存储池1',
        type: 'hot',
        size: 128,
        access: 1240,
        lastAccess: '2023-10-15 14:23:45',
        status: 'online'
      },
      // ...其他数据
    ];

    // 初始化数据
    filteredData.value = [...storageData];

    // 更新时间
    const updateTime = () => {
      const now = new Date();
      currentTime.value = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    };

    // 初始化热力图
    const initHeatmapChart = () => {
      const chartDom = document.getElementById('heatmapChart');
      heatmapChart = echarts.init(chartDom);

      // 生成模拟热力图数据
      const data = [];
      for (let i = 0; i < 10; i++) {
        for (let j = 0; j < 10; j++) {
          // 生成随机热度值
          const value = Math.floor(Math.random() * 100);
          data.push([i, j, value]);
        }
      }

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          position: 'top',
          formatter: function (params) {
            return `访问热度: ${params.value[2]}<br>位置: (${params.value[0]}, ${params.value[1]})`;
          },
          backgroundColor: 'rgba(20, 30, 60, 0.9)',
          borderColor: '#2a4a7a',
          textStyle: {
            color: '#e4e8f0'
          }
        },
        grid: {
          top: '10%',
          bottom: '15%',
          left: '10%',
          right: '15%'
        },
        xAxis: {
          type: 'category',
          data: ['区块1', '区块2', '区块3', '区块4', '区块5', '区块6', '区块7', '区块8', '区块9', '区块10'],
          axisLine: {
            lineStyle: {
              color: '#3a4a7a'
            }
          },
          axisLabel: {
            color: '#8898b8',
            rotate: 45
          }
        },
        yAxis: {
          type: 'category',
          data: ['存储池1', '存储池2', '存储池3', '存储池4', '存储池5', '存储池6', '存储池7', '存储池8', '存储池9', '存储池10'],
          axisLine: {
            lineStyle: {
              color: '#3a4a7a'
            }
          },
          axisLabel: {
            color: '#8898b8'
          }
        },
        visualMap: {
          min: 0,
          max: 100,
          calculable: true,
          orient: 'vertical',
          right: '3%',
          top: 'middle',
          textStyle: {
            color: '#a0b1d0'
          },
          inRange: {
            color: ['#1a56db', '#00d296', '#ff5a5a']
          }
        },
        series: [{
          name: '访问热度',
          type: 'heatmap',
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };

      heatmapChart.setOption(option);
    };

    // 更改热力图视图
    const changeHeatmapView = (view) => {
      console.log(`切换到视图: ${view}`);
    };

    // 过滤数据
    const filterData = (type) => {
      if (type === 'all') {
        filteredData.value = [...storageData];
      } else if (type === 'hot') {
        filteredData.value = storageData.filter(item => item.type === 'hot');
      } else if (type === 'cold') {
        filteredData.value = storageData.filter(item => item.type === 'cold');
      }
    };

    // 响应窗口大小变化
    const handleResize = () => {
      if (heatmapChart) heatmapChart.resize();
    };

    onMounted(() => {
      updateTime();
      timer = setInterval(updateTime, 1000);
      initHeatmapChart();
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      if (timer) clearInterval(timer);
      if (heatmapChart) heatmapChart.dispose();
      window.removeEventListener('resize', handleResize);
    });

    return {
      currentTime,
      filteredData,
      changeHeatmapView,
      filterData
    };
  }
};
</script>

<style scoped>

.dashboard {
  width: 96vw;
  height: 100vh;
  background-color: #0f1c3c;
  color: #e4e8f0;
  overflow-x: auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
  padding: 1.5vh 2vw;
  background: linear-gradient(90deg, #1a2a52, #0a1a3a);
  border-radius: 1.2vw;
  box-shadow: 0 0.4vh 2vh rgba(0, 0, 0, 0.25);
  border: 0.1vw solid #2a3a6a;
}

.header-left h1 {
  font-size: 1.2vw;
  font-weight: 600;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5vh;
}

.header-left p {
  font-size: 0.8vw;
  color: #a0b1d0;
}

.time-display {
  font-size: 1vw;
  font-weight: 500;
  color: #4facfe;
  background: rgba(10, 25, 55, 0.7);
  padding: 0.8vh 1.5vw;
  border-radius: 3vw;
  border: 0.1vw solid #2a4a7a;
}

/* 主要内容布局 */
.dashboard-content {
  display: flex;
  gap: 1.5vw;
  margin-bottom: 2.5vh;
}

.content-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.chart-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5vw;
}

.stat-cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5vw;
}

.stat-card {
  background: linear-gradient(135deg, #1a2a52, #152245);
  border-radius: 1vw;
  padding: 1.5vh 1.5vw;
  box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.35);
  border: 0.1vw solid #2a3a6a;
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.stat-card:hover {
  transform: translateY(-0.3vw);
  box-shadow: 0 0.8vw 2vw rgba(0, 0, 0, 0.45);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.4vw;
}

.stat-card.blue::before {
  background: linear-gradient(90deg, #0096ff, #00f2fe);
}

.stat-card.red::before {
  background: linear-gradient(90deg, #ff5a5a, #ff9a9a);
}

.stat-card.green::before {
  background: linear-gradient(90deg, #00d296, #00f2a9);
}

.stat-card.purple::before {
  background: linear-gradient(90deg, #9664ff, #c69cff);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5vh;
}

.card-icon {
  width: 2vw;
  height: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 1vw;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1vw;
}

.card-title {
  font-size: 1vw;
  font-weight: 500;
  color: #c0d0f0;
}

.card-subtitle {
  font-size: 0.8vw;
  color: #8898b8;
  margin-top: 0.3vh;
}

.stat-value {
  font-size: 1.2vw;
  font-weight: 600;
  margin-bottom: 0.8vh;
}

.stat-trend {
  display: flex;
  align-items: center;
  color: #8898b8;
  font-size: 1vw;
}

.trend-up {
  color: #00d296;
  margin-right: 0.5vw;
}

.trend-down {
  color: #ff5a5a;
  margin-right: 0.5vw;
}

.chart-panel {
  background: linear-gradient(135deg, #1a2a52, #152245);
  border-radius: 1vw;
  padding: 2vh 2vw;
  box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.35);
  border: 0.1vw solid #2a3a6a;
  margin-bottom: 3vh;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vh;
}

.panel-title {
  font-size: 1.2vw;
  font-weight: 600;
  color: #c0d0f0;
}

.panel-actions {
  display: flex;
  gap: 0.8vw;
}

.panel-actions button {
  background: rgba(30, 50, 90, 0.7);
  border: 0.1vw solid #3a5a9a;
  color: #a0b1d0;
  padding: 0.8vh 1.2vw;
  border-radius: 0.6vw;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8vw;
}

.panel-actions button:hover {
  background: rgba(50, 70, 120, 0.7);
  color: #ffffff;
}

.chart {
  height: 30vh;
  width: 100%;
}

.heatmap-legend {
  display: flex;
  justify-content: center;
  margin-top: 1.5vh;
  align-items: center;
  gap: 1.8vw;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 1.4vw;
  height: 1.4vw;
  border-radius: 0.4vw;
  margin-right: 0.7vw;
}

.cold-color {
  background: #1a56db;
}

.warm-color {
  background: #00d296;
}

.hot-color {
  background: #ff5a5a;
}

</style>